<template>
	<view class="main">
		<view class="card-tit flex align"><text></text>基本信息</view>
		<view class="card">
			<view class="input-item flex align" @click="show=true">
				<view>任务类型</view>
				<input placeholder="请选择" v-model="obj.task_type_text" disabled />
			</view>
			<view class="input-item flex align" @click="show2=true">
				<view>发布类型</view>
				<input placeholder="请选择" v-model="obj.publish_type_text" disabled />
			</view>
			<view class="input-item flex align" @click="showTime=true">
				<view>发布时间</view>
				<input placeholder="请选择" v-model="obj.publish_time" disabled />
			</view>
			<view class="input-item flex align">
				<view>地域限制</view>
				<input placeholder="请输入地域限制" v-model="obj.region_limit" />
			</view>
			<view class="input-item flex align" @click="show3=true">
				<view>好评截图</view>
				<input placeholder="请选择" v-model="obj.praise_screenshot_text" disabled />
			</view>
			<view class="input-item flex align">
				<view>标题</view>
				<input placeholder="请输入标题" v-model="obj.title" />
			</view>
			<view class="input-item flex align" @click="showTime2=true">
				<view>截至日期</view>
				<input placeholder="请选择" v-model="obj.deadline_time" disabled />
			</view>
			<view class="input-item flex align">
				<view>报名名额</view>
				<input placeholder="请输入报名名额" v-model="obj.num" type="digit" />
			</view>
			<view class="input-item sel-input">
				<view style="margin-bottom: 20rpx;">门店</view>
				<view class="flex align" style="width: 100%;flex-wrap: wrap;">
					<view class="boxli" style="width: auto;" v-for="(item,index) in storeList" :key="index">
						<view class="boxli-ls" style="width: auto;">{{item.name}}</view>
						<view class="shanchu" style="width: auto;" @click.stop="removeli(index)" v-if="!disabled">
							<uni-icons type="clear" color="#c1c1c1" size="20"></uni-icons>
						</view>
					</view>
					<input @input="toSelect" placeholder="请输入门店名称" v-model="brand" />
				</view>
				<!-- <view class="flex align">
					<view v-for="(item,index) in storeList">{{item.name}}</view>
				</view> -->
				<view class="select-con" v-if="brand!=''&&brandS">
					<view v-for="(item,index) in array" :key="index" :data-name="item.name" :data-value="item.id"
						@click="toSelectValue" style="width: 100%;">{{item.name}}</view>
					<view v-if="array.length==0" style="width: 100%;">暂无数据</view>
				</view>
				<!-- <input placeholder="请选择" v-model="obj.store" disabled /> -->
			</view>
			<view class="input-item">
				<view style="margin-bottom: 20rpx;">报名条件</view>
				<!-- 	<u-checkbox-group 
				    v-model="checked"
				    iconPlacement="right" 
				    placement="row">
					<u-checkbox activeColor="red" label="红色"></u-checkbox>
					<u-checkbox activeColor="green" label="绿色"></u-checkbox>
				</u-checkbox-group> -->
				<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
					<u-checkbox labelSize="12" iconSize="10" size="14"
						:customStyle="{marginRight: '10px',marginBottom: '10px'}" v-for="(item, index) in checkboxList1"
						:disabled="item.disabled" :key="index" :label="item.name" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
				<!-- <input placeholder="请选择" v-model="obj.store" disabled /> -->
			</view>
			<view class="input-item flex align" @click="show7=true" v-if="setLevel">
				<view>达人等级</view>
				<input placeholder="请选择" v-model="obj.level_text" disabled />
			</view>
			<view class="input-item flex align" @click="show6=true">
				<view>达人身份</view>
				<input placeholder="请选择" v-model="obj.daren_type_text" disabled />
			</view>
			<view class="input-item flex align" v-if="setFans">
				<view>粉丝数量</view>
				<input placeholder="请输入粉丝数量" v-model="obj.fans" type="digit" />
			</view>
			<view class="input-item">
				<view style="margin-bottom: 20rpx;">合作费用</view>
				<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
					<u-radio labelSize="12" iconSize="10" size="14" :customStyle="{marginRight: '10px'}"
						v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.value"
						@change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="input-item" v-if="obj.cost_model==1">
				<view style="margin-bottom: 20rpx;">是否开启报价</view>
				<u-radio-group v-model="radiovalue3" placement="row">
					<u-radio labelSize="12" iconSize="10" size="14" :customStyle="{marginRight: '20px'}"
						v-for="(item, index) in radiolist3" :key="index" :label="item.name" :name="item.value"
						@change="radioChange3">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="input-item flex align" @click="show4=true" v-if="obj.cost_model==1">
				<view>费用类型</view>
				<input placeholder="请选择" v-model="obj.cost_type_text" disabled />
			</view>
			<view class="input-item flex" v-if="obj.cost_model==1&&obj.is_user_price==0">
				<view>费用金额</view>
				<!-- <input placeholder="请输入费用金额" v-model="obj.cost_amount" type="number" /> -->
				<view class="price-item" style="width: 60%;">
					<!-- <view class="item flex align" style="width: 100%;">
						<view>无等级</view>
						<input placeholder="请输入费用金额" v-model="obj.cost_amount" type="number" />
					</view> -->
					<view class="item flex align" style="width: 100%;" v-for="(item,index) in levelList">
						<view>{{item.name}}</view>
						￥<input style="border: solid 1rpx gainsboro;text-align: center;" placeholder="请输入费用金额"
							v-model="item.cost_amount" type="number" />
					</view>
					<!-- <view class="item flex align" style="width: 100%;">
						<view>V2</view>
						<input placeholder="请输入费用金额" v-model="obj.cost_amount" type="number" />
					</view>
					<view class="item flex align" style="width: 100%;">
						<view>V3</view>
						<input placeholder="请输入费用金额" v-model="obj.cost_amount" type="number" />
					</view> -->
				</view>
			</view>
			<view class="input-item flex align" @click="show5=true" v-if="obj.task_type==2">
				<view>达人可探店日期</view>
				<input placeholder="请选择" v-model="obj.other.visit_store.dates" disabled />
			</view>
			<view class="input-item flex align" v-if="obj.task_type==2">
				<view style="width: 40%;">每日接待探店人数</view>
				<input placeholder="请输入每日接待探店人数" v-model="obj.other.visit_store.day_person_limit" type="digit" />
			</view>
			<view class="input-item">
				<view style="margin-bottom: 20rpx;">是否开启选号</view>
				<u-radio-group v-model="radiovalue2" placement="row">
					<u-radio labelSize="12" iconSize="10" size="14" :customStyle="{marginRight: '20px'}"
						v-for="(item, index) in radiolist2" :key="index" :label="item.name" :name="item.value"
						@change="radioChange2">
					</u-radio>
				</u-radio-group>
			</view>
			
		</view>
		<view class="card-tit flex align"><text></text>任务说明</view>
		<view class="card" style="padding: 24rpx;">
			<textarea placeholder="输入任务说明" v-model="obj.desc"></textarea>
		</view>
		<view v-if="obj.task_type==1">
			<view class="card-tit flex align"><text></text>POI截图</view>
			<view class="loadUp" @click="toUpload()" v-if="obj.other.poi.picture==''">
				<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
			</view>
			<view class="logo" @click="toUpload()" v-else>
				<image :src="obj.other.poi.picture"></image>
			</view>
			<view class="card-tit flex align"><text></text>素材分组</view>
			<view class="file-list" v-if="arrMeteria.length!=0">
				<view class="item flex align between" v-for="(item,index) in arrMeteria">
					<view>{{item.name}}</view>
					<view @click="toDel(index)">删除</view>
				</view>
			</view>
			<navigator v-if="obj.store.length!=0" :url="'/pages/task/changeMateria?id='+obj.store" hover-class="none"
				class="mater-btn">
				去素材库选择素材分组</navigator>

		</view>
		<view class="resign-btn" @click="toComfirm()">{{type==1?'发布任务':'确认修改'}}</view>
		<!-- 时间选择 -->
		<u-datetime-picker @confirm="confirmTime" @cancel="showTime=false" ref="datetimePicker" :show="showTime"
			v-model="value1" mode="datetime"></u-datetime-picker>
		<u-datetime-picker @confirm="confirmTime2" @cancel="showTime2=false" ref="datetimePicker" :show="showTime2"
			v-model="value2" mode="datetime"></u-datetime-picker>
		<!-- 任务类型 -->
		<u-picker :show="show" @cancel="show=false" @confirm="onConfirm" keyName="name" :columns="taskList"></u-picker>
		<u-picker :show="show6" @cancel="show6=false" @confirm="onConfirm5" keyName="name"
			:columns="darenList"></u-picker>
		<!-- 发布类型 -->
		<u-picker :show="show2" @cancel="show2=false" @confirm="onConfirm2" keyName="name"
			:columns="publishList"></u-picker>
		<!-- 好评截图 -->
		<u-picker :show="show3" @cancel="show3=false" @confirm="onConfirm3" keyName="name"
			:columns="praiseList"></u-picker>
		<!-- 费用类型 -->
		<u-picker :show="show4" @cancel="show4=false" @confirm="onConfirm4" keyName="name"
			:columns="costTypeList"></u-picker>
		<!-- 达人等级 -->
		<u-picker :show="show7" @cancel="show7=false" @confirm="onConfirm7" keyName="name"
			:columns="levelList2"></u-picker>
		<!-- 达人可探店日期 -->
		<u-calendar :show="show5" mode="multiple" @close="show5=false" @confirm="confirmDates"></u-calendar>
	</view>
</template>

<script>
	import {
		dictAll,
		storeOptions,
		taskAdd,
		taskListsCompanyDetail,
		taskEdit
	} from '@/api/apiData.js';
	import {
		uploadOss
	} from '@/utils/oss/oss.js'
	export default {
		data() {
			return {
				showTime: false,
				showTime2: false,
				show: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				show7: false,
				taskList: [],
				costTypeList: [],
				value1: Number(new Date()),
				value2: Number(new Date()),
				publishList: [],
				praiseList: [],
				brandS: false,
				brand: '',
				obj: {
					level_cost_amount: [],
					level: '',
					level_text: '',
					daren_type_text: '',
					daren_type: '',
					task_type: '',
					task_type_text: '',
					publish_type: '',
					publish_type_text: '',
					publish_time: '',
					region_limit: '',
					praise_screenshot: '',
					title: '',
					deadline_time: '',
					num: '',
					store: '',
					signing_condition: [],
					fans: '',
					cost_model: '',
					cost_type: '',
					cost_type_text: '',
					cost_amount: '',
					desc: '',
					other: {
						visit_store: {
							dates: [],
							day_person_limit: ''
						},
						material_group: [],
						poi: {
							picture: ''
						}
					},
					praise_screenshot_text: '',
					praise_screenshot: '',
					is_user_price:0,
					is_select:''
				},
				checkboxValue1: [3],
				// 基本案列数据
				checkboxList1: [],
				array: [],
				// 基本案列数据
				radiolist1: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				arrMeteria: [],
				storeList: [],
				darenList: [],
				partlist: [
					// {
					// 	value: 101,
					// 	text: "深圳",
					// 	active: false,
					// },
					// {
					// 	value: 102,
					// 	text: "成都",
					// 	active: false,
					// },
					// {
					// 	value: 103,
					// 	text: "北京",
					// 	active: false,
					// },
					// {
					// 	value: 104,
					// 	text: "上海",
					// 	active: false,
					// }
				],
				value: '',
				storeValue: [],
				type: 1,
				task_id: '',
				setFans: false,
				levelList: [],
				levelList2: [],
				setLevel: false,
				radiolist2:[
					{
						name:'否',
						value:0
					},
					{
						name:'是',
						value:1
					}
				],
				radiolist3:[
					{
						name:'否',
						value:0
					},
					{
						name:'是',
						value:1
					}
				],
				radiovalue2:'',
				radiovalue3:'',
			};
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
				this.task_id = option.id
				uni.setNavigationBarTitle({
					title: '编辑任务'
				})
				this.getDetail()
			}
			this.getAllList()
		},
		onShow() {
			if (this.type == 1) {
				let arr = uni.getStorageSync('arr')
				if (arr) {
					this.arrMeteria = arr
				}
			}

		},
		methods: {
			async getDetail() {
				const result = await taskListsCompanyDetail({
					id: this.task_id
				})
				if (result.code == 1) {
					let arr = []
					if (result.data.signing_condition.length != 0) {
						result.data.signing_condition.forEach(item => {
							item = Number(item)
							arr.push(item)
						})
						this.checkboxValue1 = arr
						if (arr.indexOf(2) == -1) {
							console.log("2不存在")
							this.setFans = false
						} else {
							this.setFans = true
						}
						if (arr.indexOf(1) == -1) {
							console.log("1不存在")
							this.setLevel = false
						} else {
							this.setLevel = true
						}
					}

					this.radiovalue1 = result.data.cost_model
					this.radiovalue2 = result.data.is_select
					this.radiovalue3 = result.data.is_user_price
					this.arrMeteria = result.data.material_group_text
					// this.obj.task_name = result.data.task_type_text
					this.storeList = result.data.store_text
					this.levelList = result.data.level_cost_amount
					this.obj = result.data
					this.obj.daren_type = result.data.app[0]
					this.obj.daren_type_text = result.data.app_text[0]
					
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			changeStore(e) {
				console.log(e)
			},
			toDel(index) {
				// 使用splice删除指定索引的项
				this.arrMeteria.splice(index, 1);
			},
			toUpload() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async (res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'img/',
							filePath: res.tempFilePaths[0],
						})
						that.obj.other.poi.picture = 'https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					}
				})
			},
			confirmDates(e) {
				console.log(e);
				this.obj.other.visit_store.dates = e
				this.show5 = false
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.obj.cost_model = n
			},
			radioChange2(n) {
				console.log('radioChange', n);
				this.obj.is_select = n
			},
			radioChange3(n) {
				console.log('radioChange', n);
				this.obj.is_user_price = n
			},
			toSelectValue(e) {
				this.brand = e.currentTarget.dataset.name
				this.storeList.push({
					name: e.currentTarget.dataset.name,
					id: e.currentTarget.dataset.value
				})
				console.log(this.storeList)
				const uniqueArr = Array.from(new Set(this.storeList.map(JSON.stringify))).map(JSON.parse);
				this.storeList = uniqueArr
				this.brand = ''
				this.brandS = false
				let storeList = this.storeList
				if (storeList.length != 0) {
					let arr = []
					storeList.forEach(item => {
						arr.push(item.id)
					})
					console.log(arr)
					this.obj.store = arr
				}
			},
			removeli(index) {
				this.storeList.splice(index, 1);
			},
			checkboxChange(n) {
				console.log(n);
				this.obj.signing_condition = n
				if (n.indexOf(2) == -1) {
					console.log("2不存在")
					this.setFans = false
				} else {
					this.setFans = true
				}
				if (n.indexOf(1) == -1) {
					console.log("1不存在")
					this.setLevel = false
				} else {
					this.setLevel = true
				}
				// console.log(this.obj.signing_condition);
			},
			toSelect() {
				this.brandS = true
				if (this.brand != '') {
					this.getBrand()
				}
			},
			async getBrand() {
				const result = await storeOptions({
					name: this.brand
				})
				this.array = result.data
			},
			async getAllList() {
				const result = await dictAll()
				this.taskList = [result.data.task_type]
				this.publishList = [result.data.publish_type]
				this.praiseList = [result.data.praise_screenshot_options]
				result.data.task_signing_condition.forEach(item => {
					if (item.value == 3) {
						item.disabled = true
					} else {
						item.disabled = false
					}
				})
				this.checkboxList1 = result.data.task_signing_condition
				this.radiolist1 = result.data.task_cost_model
				result.data.task_cost_type.forEach(item => {
					item.name = item.name + '（' + item.remark + '）'
				})
				this.costTypeList = [result.data.task_cost_type]
				this.darenList = [result.data.app]
				this.levelList2 = [result.data.task_daren_level]
				result.data.daren_level.forEach(item => {
					item.cost_amount = '0.00',
					item.level = item.name
				})
				if(this.levelList.length==0){
					this.levelList = result.data.daren_level
					let newItem = {
						name: "无等级",
						cost_amount: '0.00',
						value: 0,
						remark:'',
						level:'无等级'
					}
					// 在索引0的位置插入新对象
					this.levelList.splice(0, 0, newItem)
				}
				
			},
			onConfirm(e) {
				this.obj.task_type = e.value[0].value
				this.obj.task_type_text = e.value[0].name
				this.show = false
			},
			onConfirm5(e) {
				this.obj.daren_type = e.value[0].value
				this.obj.daren_type_text = e.value[0].name
				this.show6 = false
			},
			onConfirm7(e) {
				this.obj.level = e.value[0].value
				this.obj.level_text = e.value[0].name
				this.show7 = false
			},
			onConfirm2(e) {
				this.obj.publish_type = e.value[0].value
				this.obj.publish_type_text = e.value[0].name
				this.show2 = false
			},
			onConfirm3(e) {
				this.obj.praise_screenshot = e.value[0].value
				this.obj.praise_screenshot_text = e.value[0].name
				this.show3 = false
			},
			onConfirm4(e) {
				this.obj.cost_type = e.value[0].value
				this.obj.cost_type_text = e.value[0].name
				this.show4 = false
			},
			confirmTime(e) {
				this.showTime = false
				this.obj.publish_time = this.getDate(e.value)
			},
			confirmTime2(e) {
				this.showTime2 = false
				this.obj.deadline_time = this.getDate(e.value)
			},
			getDate(timestamp) {
				var date = new Date(timestamp); // 时间戳转换成Date对象
				var year = date.getFullYear(); // 获取年份
				var month = date.getMonth() + 1; // 获取月份，需要+1因为月份从0开始
				var day = date.getDate(); // 获取日
				var hours = date.getHours(); // 获取小时
				var minutes = date.getMinutes(); // 获取分钟
				var seconds = date.getSeconds(); // 获取秒钟

				// 格式化月份、日期、小时、分钟和秒
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				// 组合成日期时间字符串
				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
			},
			toComfirm() {
				let obj = this.obj
				console.log(obj)
				obj.cost_amount = Number(obj.cost_amount)
				obj.app = [obj.daren_type]
				if (obj.cost_model == 1) {
					let arrNew = []
					let arr = this.levelList
					arr.forEach(item=>{
						arrNew[item.value] = item
					})
					obj.level_cost_amount = arrNew
				}
				if (obj.task_type == '') {
					uni.showToast({
						title: '请选择任务类型',
						icon: 'error'
					})
					return false
				}
				if (obj.store == '') {
					uni.showToast({
						title: '请选择门店',
						icon: 'error'
					})
					return false
				}
				if (obj.title == '') {
					uni.showToast({
						title: '请输入标题',
						icon: 'error'
					})
					return false
				}
				let that = this
				uni.showModal({
					title: "提示",
					content: "确定要提交吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							that.toSend()
						} else {

						}
					}

				})
			},
			async toSend() {
				let obj = this.obj
				let arrMeteria = this.arrMeteria
				if (arrMeteria.length != 0) {
					let arr = []
					arrMeteria.forEach(item => {
						arr.push(item.id)
					})
					obj.other.material_group = arr
				}
				if (this.type == 1) {
					const result = await taskAdd(obj)
					if (result.code == 1) {
						uni.showToast({
							title: result.msg
						})
						uni.removeStorageSync('arr');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/manage/taskList'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'error'
						})
					}
				} else {
					const result = await taskEdit(obj)
					if (result.code == 1) {
						uni.showToast({
							title: result.msg
						})
						uni.removeStorageSync('arr');
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'error'
						})
					}
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxli {
		height: 60rpx;
		/* 高度可以根据需要设置 */
		margin: 10rpx;
		/* 项之间的间距 */
		background-color: #f0f2f5;
		padding: 0 16rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.shanchu {
			margin-left: 8rpx;
		}
	}

	.price-item {
		.item {
			margin-bottom: 10rpx;
		}
	}

	.sel-input {
		position: relative;

		.select-con {
			position: absolute;
			width: 100% !important;
			left: 0%;
			background: white;
			z-index: 300;
			font-size: 28rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			text-align: center;
			bottom: -41px;

			view {
				color: #2D2D2D;
				padding: 20rpx 0;
				border-bottom: solid 1rpx gainsboro;
			}
		}
	}

	.loadUp {
		background: #D9D9D9;
		border-radius: 12rpx;
		width: fit-content;
		padding: 43rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.file-list {
		margin-bottom: 80rpx;

		.item {
			margin-bottom: 20rpx;
			font-size: 24rpx;
			font-weight: bold;
			line-height: 59rpx;
			margin-bottom: 20rpx;

			view {
				border-radius: 42rpx;
			}

			view:nth-child(1) {
				width: 65%;
				background: white;
				color: #FF6543;
				padding: 0 43rpx;
			}

			view:nth-child(2) {
				width: 18%;
				color: white;
				background: #FF6543;
				text-align: center;
			}
		}
	}

	.logo {
		margin-bottom: 20rpx;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.main {
		margin: 24rpx;
		padding-bottom: 100rpx;

		.card-tit {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;

			text {
				background: #FF6543;
				display: block;
				width: 5rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 0rpx 24rpx;
			background: white;
			margin-bottom: 30rpx;

			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;
				position: relative;

				view {
					width: 33%;
				}

				input {
					width: 66%;
				}
			}
			
		}

		.resign-btn {
			background: #FF6543;
			border-radius: 12rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: white;
			padding: 10rpx 81rpx;
			width: fit-content;
			margin: 80rpx auto;
		}

		.mater-btn {
			background: #FF6543;
			border-radius: 43rpx;
			font-size: 32rpx;
			text-align: center;
			color: white;
			font-weight: bold;
			padding: 19rpx 0;
		}
	}
</style>